<!--  -->
<template>
  <div class="page-wrap home">
    <div class="home-title">
      工厂：{{ cop || '--' }}&nbsp;日期：{{ endDate || '--' }}
    </div>
    <div v-for="(item, index) in list" :key="index" class="home-list">
      <div class="home-item-title">{{ item.title }}</div>
      <van-list v-model="loading" :finished="finished"
        v-if="(item.list && item.list.length && item.list != null) || loading == true">
        <van-cell v-for="(items, indexs) in item.list" :key="indexs" @click="linkJump(items, index)">
          <vue-markdown :source="indexs + 1+'、'+items.content"></vue-markdown>
        </van-cell>
      </van-list>
      <div v-else>
        暂无数据
      </div>
    </div>
  </div>
</template>

<script>
import CONFIG from "@/config/config";
import storage from "@/utils/storage";
import { clientService } from '@/api'
import dayjs from 'dayjs'
import { Toast } from 'vant';
import VueMarkdown from 'vue-markdown'
export default {
  name: 'Home',
  data() {
    return {
      loading: true,
      finished: false,
      list: [
        {
          title: '一、异常原料接收',
          list: []
        },
        {
          title: '二、异常原料使用',
          list: []
        },
        {
          title: '三、生产制程问题点',
          list: []
        },
        {
          title: '四、成品异常指标',
          list: []
        },
        {
          title: '五、当日待解决问题',
          list: []
        }
      ],
      endDate: dayjs().format('YYYY/MM/DD') + ' 10:00',
      cop: ''
    };
  },
  //组件
  components: {VueMarkdown},
  //在实例创建完成后被立即调用
  created: function () {
    if (this.$route.query.endDate) {
      this.endDate = this.$route.query.endDate
      this.cop = this.$route.query.cop
    }

    this.lists()
  },
  //计算属性  将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
  computed: {},
  //dom 加载完后执行
  mounted: function () { },
  //方法
  methods: {
    lists() {
      clientService.getList({ endDate: this.endDate, cop: this.cop }).then(json => {
        let res = json.result
        this.loading = false
        this.finished = true
        if (!json.error) {
          console.log(json)

          this.list.forEach((item, index) => {
            if (index == 0) {
              item.list = res.abnormalMaterialReceive
            } else if (index == 1) {
              item.list = res.abnormalMaterialUse
            } else if (index == 2) {
              item.list = res.productQuestion
            } else if (index == 3) {
              item.list = res.productionAbnormal
            } else if (index == 4) {
              item.list = res.importanceAttentions
            }
          });
          console.log(this.list)
        } else {
          Toast.fail(json.error.msg);
          if (json.error.code == 1104 ||json.error.code == 99991677) {
            storage.setItem(CONFIG.TOKEN, '');
            this.$router.replace({ name: 'Auth' })
          }
        }
      })
    },
    linkJump(item, index) {
      console.log(item, index)
      if (index != 4) {
        window.location.replace(item.url)
      } else {
        //storage.setItem(CONFIG.ITEM, JSON.stringify(item));
        this.$router.push({
          name: 'cop', // 跳转的目标路由路径
          query: {
            "appToken": item.appToken,
            "tableId": item.tableId,
            "recordId": item.recordId,
            "messageId": item.messageId,
          },
          params: {
            item: item
          }
        });
      }
    }
  },
  //一个对象，键是需要观察的表达式，值是对应回调函数
  watch: {},
};
</script>


<style scoped lang="less">
@import './home.less';
</style>
